import {useAtom} from 'jotai'
import {itemsAtom, mapAtom} from './SocketManager.jsx'
import {useMemo, useRef} from 'react'
import {useFrame} from '@react-three/fiber'
import {useGLTF, useScroll} from '@react-three/drei'
import {SkeletonUtils} from 'three-stdlib'
import {useGrid} from '../hooks/useGrid.jsx'


const ShopItem = ({item, ...props}) => {
  const {name, size} = item
  // const [map, setMap] = useAtom(mapAtom)
  // 获取模型
  const {scene} = useGLTF(`/models/items/${name}.glb`)
  // 3D模型不能重复使用，需要克隆
  const clone = useMemo(
    () => SkeletonUtils.clone(scene), [scene]
  )
  // 工具方法：网格数据转v3
  const {gridToV3} = useGrid()

  return (
    <group {...props}>
      <group position={gridToV3([0, 0], size[0], size[1])}>
        <primitive object={clone}/>
      </group>
    </group>
  )
}

export const Shop = ({onShopItemSelected}) => {
  const [items] = useAtom(itemsAtom)
  const xMax = useRef(0)
  const [map] = useAtom(mapAtom)
  const shopItems = useMemo(() => {
    let x = 0
    // console.log('----🚀', items)
    // 遍历渲染每个物品
    return Object.values(items).map((item, index) => {
      // 商城物品在x位置
      const xPos = x
      // 计算下一个商品位置： 当前物品x方向的大小 + 1：物品之间的间隔
      // 不断累加直到最后一个物品
      x += item.size[0] / map.girdSpace + 1
      // 记录最大长度
      xMax.current = x

      // 点击物品事件传递给父组件
      return (
        <ShopItem
          key={index}
          position-x={xPos}
          item={item}
          onClick={() => onShopItemSelected(item)}
        />
      )
    })
  }, [items])

  const shopGroupRef = useRef()
  // 获取当前鼠标滚轮偏移百分比
  const scrollData = useScroll()
  useFrame(() => {
    // 当前偏移百分比 * x方向最大偏移量 = 当前x方向偏移量
    // 赋值给当前商店模型x方向位置
    shopGroupRef.current.position.x = -scrollData.offset * xMax.current
  })
  return <group ref={shopGroupRef}>{shopItems}</group>
}
